<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" class="message">
      <div class="title">车辆信息</div>
      <div class="box">
        <el-form-item label="车辆代码">
          <el-input v-model="form.vehicleId"></el-input>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.licenseNo"></el-input>
        </el-form-item>
        <el-form-item label="车属公司">
          <el-input v-model="form.companyName"></el-input>
        </el-form-item>
        <el-form-item label="车型">
          <el-input v-model="form.vehicleTypeName"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-row :gutter="20" class="bigBox" style="margin-left:50px;margin-top:30px">
      <el-col :span="6">
        <div class="fence">
          <span>外观</span>
          <div class="smallBox">
            <div class="titles">车身外观</div>
            <div class="checkBox">
              <el-radio v-model="data.out_look_busout" :label="true">合格</el-radio>
              <el-radio v-model="data.out_look_busout" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">车内环境</div>
            <div class="checkBox">
              <el-radio v-model="data.out_look_busin" :label="true">合格</el-radio>
              <el-radio v-model="data.out_look_busin" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">视镜</div>
            <div class="checkBox">
              <el-radio v-model="data.out_look_backmirror" :label="true">合格</el-radio>
              <el-radio v-model="data.out_look_backmirror" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">刮水器</div>
            <div class="checkBox">
              <el-radio v-model="data.out_look_rainwiper" :label="true">合格</el-radio>
              <el-radio v-model="data.out_look_rainwiper" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">发动机水箱</div>
            <div class="checkBox">
              <el-radio v-model="data.out_look_watertank" :label="true">合格</el-radio>
              <el-radio v-model="data.out_look_watertank" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(1)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(1)">不合格</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="fence">
          <span>制动系统</span>
          <div class="smallBox">
            <div class="titles">气压表状况</div>
            <div class="checkBox">
              <el-radio v-model="data.stop_gaspressure" :label="true">合格</el-radio>
              <el-radio v-model="data.stop_gaspressure" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">制动管路密封性</div>
            <div class="checkBox">
              <el-radio v-model="data.stop_stopline" :label="true">合格</el-radio>
              <el-radio v-model="data.stop_stopline" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">制动系统自检</div>
            <div class="checkBox">
              <el-radio v-model="data.stop_selfcheck" :label="true">合格</el-radio>
              <el-radio v-model="data.stop_selfcheck" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">空气压缩传动带</div>
            <div class="checkBox">
              <el-radio v-model="data.stop_airsend" :label="true">合格</el-radio>
              <el-radio v-model="data.stop_airsend" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(2)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(2)">不合格</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="fence">
          <span>轮胎</span>
          <div class="smallBox">
            <div class="titles">轮胎外观</div>
            <div class="checkBox">
              <el-radio v-model="data.tire_look" :label="true">合格</el-radio>
              <el-radio v-model="data.tire_look" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">轮胎花纹深度</div>
            <div class="checkBox">
              <el-radio v-model="data.tire_flowerdeep" :label="true">合格</el-radio>
              <el-radio v-model="data.tire_flowerdeep" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">轮胎规格和花纹</div>
            <div class="checkBox">
              <el-radio v-model="data.tire_type" :label="true">合格</el-radio>
              <el-radio v-model="data.tire_type" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">轮胎气压</div>
            <div class="checkBox">
              <el-radio v-model="data.tire_gaspresure" :label="true">合格</el-radio>
              <el-radio v-model="data.tire_gaspresure" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">轮胎螺栓螺母</div>
            <div class="checkBox">
              <el-radio v-model="data.tire_screw" :label="true">合格</el-radio>
              <el-radio v-model="data.tire_screw" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(3)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(3)">不合格</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="fence">
          <span>安全措施</span>
          <div class="smallBox">
            <div class="titles">车门应急开关</div>
            <div class="checkBox">
              <el-radio v-model="data.safe_doorswitch" :label="true">合格</el-radio>
              <el-radio v-model="data.safe_doorswitch" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">安全顶窗</div>
            <div class="checkBox">
              <el-radio v-model="data.safe_topglass" :label="true">合格</el-radio>
              <el-radio v-model="data.safe_topglass" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">安全锤</div>
            <div class="checkBox">
              <el-radio v-model="data.safe_hammer" :label="true">合格</el-radio>
              <el-radio v-model="data.safe_hammer" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">灭火器</div>
            <div class="checkBox">
              <el-radio v-model="data.safe_fireclose" :label="true">合格</el-radio>
              <el-radio v-model="data.safe_fireclose" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(4)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(4)">不合格</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="bigBox" style="margin-left:50px;margin-top:30px">
      <el-col :span="6">
        <div class="fence">
          <span>照明、信号指示灯</span>
          <div class="smallBox">
            <div class="titles">前照灯</div>
            <div class="checkBox">
              <el-radio v-model="data.light_frontlight" :label="true">合格</el-radio>
              <el-radio v-model="data.light_frontlight" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">信号指示灯</div>
            <div class="checkBox">
              <el-radio v-model="data.light_signallight" :label="true">合格</el-radio>
              <el-radio v-model="data.light_signallight" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(5)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(5)">不合格</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="fence">
          <span>传动系统</span>
          <div class="smallBox">
            <div class="titles">传动机构及连接</div>
            <div class="checkBox">
              <el-radio v-model="data.send_connect" :label="true">合格</el-radio>
              <el-radio v-model="data.send_connect" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">自动变速器密封</div>
            <div class="checkBox">
              <el-radio v-model="data.send_selfchange" :label="true">合格</el-radio>
              <el-radio v-model="data.send_selfchange" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">液力缓速器密封</div>
            <div class="checkBox">
              <el-radio v-model="data.send_waterclose" :label="true">合格</el-radio>
              <el-radio v-model="data.send_waterclose" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(6)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(6)">不合格</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="fence">
          <span>悬架系统</span>
          <div class="smallBox">
            <div class="titles">弹性元件</div>
            <div class="checkBox">
              <el-radio v-model="data.sus_elastic" :label="true">合格</el-radio>
              <el-radio v-model="data.sus_elastic" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">U型螺栓螺母</div>
            <div class="checkBox">
              <el-radio v-model="data.sus_uclose" :label="true">合格</el-radio>
              <el-radio v-model="data.sus_uclose" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="smallBox">
            <div class="titles">吊耳销(套)、锁销</div>
            <div class="checkBox">
              <el-radio v-model="data.sus_closein" :label="true">合格</el-radio>
              <el-radio v-model="data.sus_closein" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(7)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(7)">不合格</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="fences">
          <span>转向系统</span>
          <div class="smallBox">
            <div class="titles">转向机构及连接</div>
            <div class="checkBox">
              <el-radio v-model="data.change_type" :label="true">合格</el-radio>
              <el-radio v-model="data.change_type" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(8)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(8)">不合格</el-button>
          </div>
        </div>

        <div class="fences" style="margin-top:20px">
          <span>摄像头</span>
          <div class="smallBox">
            <div class="titles">摄像头拍摄方向</div>
            <div class="checkBox">
              <el-radio v-model="data.camera" :label="true">合格</el-radio>
              <el-radio v-model="data.camera" :label="false">不合格</el-radio>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" size="mini" @click="qualified(9)">合格</el-button>
            <el-button type="primary" size="mini" @click="unqualified(9)">不合格</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="footer">
      <el-button plain @click="swipingCard">刷卡</el-button>
      <el-button plain @click="submit">保存</el-button>
      <el-button plain @click="allQualified">全部合格</el-button>
      <!-- <el-button plain>打印合格通知单</el-button>
      <el-button plain>打印不合格通知单</el-button> -->
    </div>
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import cols from './cols'
import $ from '../../utils/jquery-3.5.1.min'

// import SavePage from '../components/save'
// import detailList from '../components/detailList'

const api = $api.dispatch.vehicle_examine

export default {
  name: page.name,
  mixins: [mixins.list],
  // components: { SavePage, detailList },
  data() {
    return {
      radio: '',
      form: {
        vehicleId: '',
        licenseNo: '',
        companyName: '',
        vehicleTypeName: ''
      },
      data: {
        out_look_busout: '',
        out_look_busin: '',
        out_look_backmirror: '',
        out_look_rainwiper: '',
        out_look_watertank: '',
        stop_gaspressure: '',
        stop_stopline: '',
        stop_selfcheck: '',
        stop_airsend: '',
        tire_look: '',
        tire_flowerdeep: '',
        tire_type: '',
        tire_gaspresure: '',
        tire_screw: '',
        safe_doorswitch: '',
        safe_topglass: '',
        safe_hammer: '',
        safe_fireclose: '',
        light_frontlight: '',
        light_signallight: '',
        send_connect: '',
        send_selfchange: '',
        send_waterclose: '',
        sus_elastic: '',
        sus_uclose: '',
        sus_closein: '',
        change_type: '',
        camera: ''
      },
      list: {
        title: page.title,
        cols,
        action: api.query,
        model: {
          /** 线路名称 */
          route_name: ''
        }
      },
      removeAction: api.remove,
      buttons: page.buttons,
      tabheight: 400
    }
  },
  mounted() {},
  methods: {
    // 刷卡获取车辆信息
    swipingCard() {
      const that = this
      $.ajax({
        type: 'get',
        async: false,
        url: 'http://127.0.0.1:5000/Card/ReadICCard',
        dataType: 'jsonp',
        success: function(json) {
          if (json.Data) {
            api.getcarinfoforcheck({ licenseNo: json.Data.plateNumber }).then(res => {
              that.form = res
            })
          } else {
            that.$message.warning(json.Msg)
          }
        }
      })
    },
    // 合格
    qualified(val) {
      if (val == 1) {
        this.data.out_look_busout = true
        this.data.out_look_busin = true
        this.data.out_look_backmirror = true
        this.data.out_look_rainwiper = true
        this.data.out_look_watertank = true
      } else if (val == 2) {
        this.data.stop_gaspressure = true
        this.data.stop_stopline = true
        this.data.stop_selfcheck = true
        this.data.stop_airsend = true
      } else if (val == 3) {
        this.data.tire_look = true
        this.data.tire_flowerdeep = true
        this.data.tire_type = true
        this.data.tire_gaspresure = true
        this.data.tire_screw = true
      } else if (val == 4) {
        this.data.safe_doorswitch = true
        this.data.safe_topglass = true
        this.data.safe_hammer = true
        this.data.safe_fireclose = true
      } else if (val == 5) {
        this.data.light_frontlight = true
        this.data.light_signallight = true
      } else if (val == 6) {
        this.data.send_connect = true
        this.data.send_selfchange = true
        this.data.send_waterclose = true
      } else if (val == 7) {
        this.data.sus_elastic = true
        this.data.sus_uclose = true
        this.data.sus_closein = true
      } else if (val == 8) {
        this.data.change_type = true
      } else if (val == 9) {
        this.data.camera = true
      }
    },
    // 不合格
    unqualified(val) {
      if (val == 1) {
        this.data.out_look_busout = false
        this.data.out_look_busin = false
        this.data.out_look_backmirror = false
        this.data.out_look_rainwiper = false
        this.data.out_look_watertank = false
      } else if (val == 2) {
        this.data.stop_gaspressure = false
        this.data.stop_stopline = false
        this.data.stop_selfcheck = false
        this.data.stop_airsend = false
      } else if (val == 3) {
        this.data.tire_look = false
        this.data.tire_flowerdeep = false
        this.data.tire_type = false
        this.data.tire_gaspresure = false
        this.data.tire_screw = false
      } else if (val == 4) {
        this.data.safe_doorswitch = false
        this.data.safe_topglass = false
        this.data.safe_hammer = false
        this.data.safe_fireclose = false
      } else if (val == 5) {
        this.data.light_frontlight = false
        this.data.light_signallight = false
      } else if (val == 6) {
        this.data.send_connect = false
        this.data.send_selfchange = false
        this.data.send_waterclose = false
      } else if (val == 7) {
        this.data.sus_elastic = false
        this.data.sus_uclose = false
        this.data.sus_closein = false
      } else if (val == 8) {
        this.data.change_type = false
      } else if (val == 9) {
        this.data.camera = false
      }
    },
    // 全部合格
    allQualified() {
      this.data.out_look_busout = true
      this.data.out_look_busin = true
      this.data.out_look_backmirror = true
      this.data.out_look_rainwiper = true
      this.data.out_look_watertank = true
      this.data.stop_gaspressure = true
      this.data.stop_stopline = true
      this.data.stop_selfcheck = true
      this.data.stop_airsend = true
      this.data.tire_look = true
      this.data.tire_flowerdeep = true
      this.data.tire_type = true
      this.data.tire_gaspresure = true
      this.data.tire_screw = true
      this.data.safe_doorswitch = true
      this.data.safe_topglass = true
      this.data.safe_hammer = true
      this.data.safe_fireclose = true
      this.data.light_frontlight = true
      this.data.light_signallight = true
      this.data.send_connect = true
      this.data.send_selfchange = true
      this.data.send_waterclose = true
      this.data.sus_elastic = true
      this.data.sus_uclose = true
      this.data.sus_closein = true
      this.data.change_type = true
      this.data.camera = true
    },
    //保存按钮
    submit() {
      if (this.form.licenseNo == '') {
        this.$message.warning('请刷报班卡')
      } else {
        this.data.newParam = 'car_id'
        this.data.car_id = this.form.licenseNo
        api.checkInfoAdd(this.data).then(res => {
          console.log(res)
        })
      }

      console.log(this.data)

      // console.log(this.data.out_look_busout)
    }
  }
}
</script>
<style scoped>
.message {
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 95%;
  margin: auto;
}
.title {
  margin: 15px;
  font-size: 15px;
  font-weight: bold;
}
.box {
  display: flex;
  justify-content: space-around;
}
.fence {
  width: 80%;
  padding: 10px;
  height: 270px;
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.fences {
  width: 80%;
  padding: 10px;
  height: 110px;
  position: relative;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.smallBox {
  display: flex;
  margin-top: 10px;
}
.titles {
  height: 30px;
  width: 120px;
  text-align: center;
  line-height: 30px;
  background-color: #ccc;
  font-size: 15px;
}
.checkBox {
  height: 30px;
  width: 150px;
  text-align: center;
  line-height: 30px;
  margin-left: 10px;
}
.foot {
  position: absolute;
  bottom: 10px;
  left: 100px;
}
.footer {
  display: flex;
  width: 50%;
  margin: auto;
  margin-top: 20px;
  justify-content: space-around;
}
</style>
